import React from 'react'
import { View } from '@tarojs/components';
import { SideBarItem } from '@/model/declare';
import cls from 'classnames'
import { Info } from '../Info';


import './index.scss'

/**
 * TabItem
 * @param props 
 */
export const SideBarItemEle: React.FC<SideBarItem & { onClick?: () => void }> = (props) => {

    return (
        <View
            className={cls("xxm-sidebar-item", {
                'xxm-sidebar-item--selected': props.active,
                'xxm-sidebar-item--disabled': props.disabled
            })}
            onClick={
                () => {
                    if (!props.disabled && !props.active && props.onClick) {
                        props.onClick()
                    }
                }
            }
            hover-class="xxm-sidebar-item--hover"
            hover-stay-time="70"
        >
            <View className="xxm-sidebar-item__text">
                {
                    (props.info || props.dot) &&
                    <Info
                        dot={props.dot}
                        info={props.info}
                        customStyle={{ color: '#fff'}}

                    />
                }
                <View className="xxm-sidebar-item__title">{props.title}</View>
            </View>
        </View>
    )
}